<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link href="../../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link href="../../static/css/slide-unlock.css" th:href="@{css/slide-unlock.css}" rel="stylesheet" type="text/css" />
    <script src="../../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}" type="text/javascript"></script>
    <script src="../../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>
    <script src="../../static/js/jquery.slideunlock.js" th:src="@{js/jquery.slideunlock.js}" type="text/javascript" ></script>

    <style type="text/css">
        .circle {
            margin-top: 3px;
            width: 14px;
            height: 14px;
            background: #dbdbdb;
            border-radius: 50%;
            border: 1px solid #dbdbdb;
        }

        .main{
            border: 1px solid #ff3f34;
            background-color: #F8EFBA;
        }

    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: #ffffff; height: 80px;margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px; background: url(../../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <!--<div class="nav navbar-nav" style="width: 80%;padding-top: 25px;padding-left: 80px">
                <a href=""><span style="float: left;font-size: 20px">首页&nbsp;</span></a>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 30%;margin-top: 15px;"></div>
                <span style="color: #ffa801;float: left;font-size: 20px">&nbsp;&nbsp;登录中心</span>
            </div>-->
            <div class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
                <!--<span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                <span style="color: #1e272e;font-size: 15px" >登录</span>
                &nbsp;&nbsp;
                <a href="#">
                    <span class="fcolor glyphicon glyphicon-pencil" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >注册</span>
                </a>
                -->
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div style="padding-top: 35px; padding-left: 20px;">
                <div style="float: left;border-bottom: 5px solid #2ecc71;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;background-color: #2ecc71; border-color: #2ecc71"></div>
                <span style="color: #747d8c ;float: left">&nbsp;验证手机&nbsp;&nbsp;&nbsp;</span>
                <div style="float: left;border-bottom: 5px solid #dbdbdb;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;"></div>
                <span style="color: #747d8c;float: left">&nbsp;设置密码&nbsp;&nbsp;&nbsp;</span>
                <div style="float: left;border-bottom: 5px solid #dbdbdb;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;"></div>
                <span style="color: #747d8c;float: left">&nbsp;注册成功</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-1 col-md-5" style="margin-top: 60px">
            <form class="form-horizontal" role="form" action="/setpwd">
                <div class="form-group">
                    <span for="phone" class="col-sm-3 control-label">手机号</span>
                    <select style="height: 40px;outline:none;">
                        <option>中国区号 86</option>
                        <option>中国区号 86</option>
                        <option>中国区号 86</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <input type="text" id="phone" autocomplete="off" style="width:38%; height: 39px;outline:none;padding-left: 10px" value="" placeholder="有效手机号">
                    <div>
                        <!--<div class="col-sm-offset-3" style="background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6">
                            <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                            <span  style="font-size: 11px; color: #636e72">请输入手机号码</span>
                        </div>-->
                    </div>
                </div>
   <!--            <div class="form-group">
                    <div class="col-sm-offset-3" style="background-color:#f6e58d; width: 200px; padding-left: 5px; border: 1px solid #7f8fa6">
                          <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                          <span  style="font-size: 11px; color: #636e72">请输入手机号码</span>
                    </div>
                </div>-->
                <div class="form-group">
                    <span class="col-sm-3 control-label">滑块验证</span>
                    <div id="demo">
                        <div id="slider" style="height: 38px; width: 305px; border-radius: 0px;  margin: 0px ">
                            <div id="slider_bg"></div>
                            <span id="label" style="border-radius: 0px;height: 38px; ">
                                <span>>></span>
                            </span>
                            <span id="labelTip" style="height: 35px;">请按住滑块拖到最右</span>
                        </div>
                    </div>
                    <div>
                        <!--<div class="col-sm-offset-3" style="background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6">
                            <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                            <span  style="font-size: 11px; color: #636e72">请拖动滑块进行验证</span>
                        </div>-->
                    </div>
                </div>
                <div class="form-group">
                    <span class="col-sm-3 control-label">短信验证码</span>
                    <div style="border: 1px solid #a4b0be; width: 303px; margin-left: 123px">
                        <input type="text" id="num" autocomplete="off" style="width:200px; border: 0px; height: 39px;outline:none;padding-left: 10px" value="" placeholder="6位数">
                        <a id="yanzheng" href="#" style="padding-left: 15px; font-size: 13px; text-decoration:none;">发送验证码</a>
                        <span id="second" style="font-size: 12px; float: right;padding-right: 20px;padding-top: 11px"></span>
                    </div>
                    <div>
                       <!-- <div class="col-sm-offset-3" style="background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6">
                            <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                            <span  style="font-size: 11px; color: #636e72">请输入验证码</span>
                        </div>-->
                    </div>
                </div>
                <div class="form-group">
                    <span class="col-sm-3"></span>
                    <div>
                        <span style="color: #57606f; font-size: 13px">
                                同意
                                <a href="" style="color: #57606f">服务协议</a>
                                和
                                <a href="" style="color: #57606f">隐私政策</a>
                        </span>
                    </div>
                </div>
                <div class="form-group">

                    <div class="col-sm-offset-3">
                        <button id="sub" type="submit" class="btn btn-warning" style="width: 200px">下一步，设置密码</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



<script>

    /*$('#sub').click(function () {
        location.href="/setpwd";
    });*/

    var i = 0;
    var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
    var myyanma = /^[0-9]{6}$/

    $(function () {
        var slider2 = new SliderUnlock("#slider",{
            successLabelTip : "验证成功"

        },function(){
            /* alert("验证成功,即将跳转至bootstrap模板库");
             window.location.href="http://www.bootstrapmb.com";*/
            //以下四行设置恢复初始，不需要可以删除
            //setTimeout(function(){
            //$("#labelTip").html("拖动滑块验证");
            // $("#labelTip").css("color","#787878");
            //},2000);
            //slider.init();
            //alert(sli);
            i = 1;
            //alert( $("#username").val());

            $("#label").html("");
            $("#label").html("<span class='glyphicon glyphicon-ok' style='color:#7AC23C;'></span>");
        });
        slider2.init();


        $("#yanzheng").click(function(){

            if($("#phone").val() == "" || $.trim($("#phone").val()).length == 0){
                //alert("请输入手机号码");
                $("#phone").next().html("");
                $("#phone").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入手机号码</span>\n" +
                    "                        </div>");
                // $("#phone").toggleClass("main");

                return false;
            }else if (!myreg.test($("#phone").val())){
                //alert("请输入正确的手机号码");
                $("#phone").next().html("");
                $("#phone").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入正确的手机号码</span>\n" +
                    "                        </div>");
                return false;
            }else if (i != 1) {
                //alert("请拖动滑块验证");
                $("#phone").next().html("");
                $("#demo").next().html("");
                $("#demo").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                   "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                   "                            <span  style=\"font-size: 11px; color: #636e72\">请拖动滑块进行验证</span>\n" +
                   "                        </div>");
                return false;
            }else {
                showtime();
                //alert($("#yanzheng").text());
                $("#phone").next().html("");
                $("#demo").next().html("");
                $("#num").parent().next().html(" <div class=\"col-sm-offset-3\" style=\"background-color:#b8e994; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-ok\" style=\"color: #27ae60; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">验证码已发送，请注意查收</span>\n" +
                    "                        </div>");
                return  false;
            }
        });



        $("#sub").click(function(){

            if($("#phone").val() == "" || $.trim($("#phone").val()).length == 0){
               //alert("请输入手机号码");
                $("#phone").next().html("");
                $("#phone").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入手机号码</span>\n" +
                    "                        </div>");
                return false;
            }else if (!myreg.test($("#phone").val())){
                //alert("请输入正确的手机号码");
                $("#phone").next().html("");
                $("#phone").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入正确的手机号码</span>\n" +
                    "                        </div>");
                return false;
            }else if (i != 1) {
                //alert("请拖动滑块验证");
                $("#phone").next().html("");
                $("#demo").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请拖动滑块进行验证</span>\n" +
                    "                        </div>");
                return false;
            }else if ($("#num").val() == "" || $.trim($("#num").val()).length == 0){
                //alert("请输入验证码");
                $("#demo").next().html("");
                $("#num").parent().next().html(" <div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入验证码</span>\n" +
                    "                        </div>");
                return false;
            }else if (!myyanma.test($("#num").val())) {
                //alert("请输入正确的验证码");
                $("#num").parent().next().html("");
                $("#num").parent().next().html(" <div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请输入正确的验证码</span>\n" +
                    "                        </div>");
                return false;
            }else {
                location.href="/setpwd";
            }
        });



    })



    function showtime(){
        var time=30;
        times = setInterval(function(){
            time=time-1;
            //var minute=parseInt(time/60);
            //var second=parseInt(time%60);
            //countdown.innerHTML='还剩'+minute+'分'+second+'秒';
            //alert($("#yanzheng").text());
            $("#yanzheng").html('') ;
            $("#second").html('&nbsp;&nbsp;&nbsp;'+time + '秒') ;

            if(time == 0){
                $("#second").html('') ;
                $("#yanzheng").html('  重新发送') ;
                clearInterval(times),function(){
                    showtime();
                }
            }

        },1000);
    }


</script>
    </body>
</html>